<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端界面案例</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        body{
            display: flex;
            flex-direction: column;
        }
        header{
            height: 44px;
            display: flex;
            background: #0cc440;
            justify-content: center;
            align-items: center;
        }
        header div{
            /* display: flex; */
            width: 60px;
            height: 24px;
            line-height: 24px;
            font-size: 12px;
            text-align: center;
        }
        header div:first-child{
            color: white;
            background: #63d985;
            border-radius: 10px 0 0 10px;
        }
        header div:last-child{
            color: #99ebba;
            background: #3dd065;
            border-radius: 0 10px 10px 0;
        }
        section{
            flex: 1;
            overflow: auto;
        }
        ul{
            list-style: none;   
        }
        section ul{
            display: flex;
            position: sticky;
            top: 0;
        }
        section ul>li{
            color: #656565;
            font-size: 12px;
            flex: 1;
            /* width: 33.33%; */
            height: 35px;
            line-height: 35px;
            text-align: center;  
            border-bottom: 0.5px solid #e1e8e1;
            background:white;
        }
        ul li:hover{
            border-bottom:2.5px solid #0cc440;
            color: #0cc440;
        }
        
        section .div1{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .div1>div{
            width: calc(50% - 2.5px);
            box-sizing: border-box;
            /* height: 187px; */
            border: 0.5px solid  #e1e8e1;
            margin-top: 4px; 
        }
        .div1 div>p{
            height: 28px;
            width: 100%;
            line-height: 28px;        
            text-indent: 10px;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden; 
            text-overflow:ellipsis;
        }
        .div1 div>img{
            width: 100%;
            /* height: calc(100% - 28px); */
        }
        
        
        
        footer{
            height: 44px;
            background:white;
            display: flex;
            position: relative;
        }
        footer div{
            display: flex;
            flex-direction: column;
            width: 20%;
            color: #d6d6d6;
            align-items: center;
            justify-content: center;
        }
        footer div i{
            height: 21px;
            line-height: 21px;
            font-size: 15px;
        }
        footer div span{
            line-height: 17px;
            height: 17px;
            font-size: 12px;
        }
        footer div:nth-child(3) i{
            width: 50px;
            height: 50px;
            font-size: 30px;
            border-radius: 50%;
            position: absolute;
            border: 1px solid #d6d6d6; 
            top: -8px;
            left: 50%;
            text-align: center;
            line-height: 50px;
            margin-left: -25px;
            background: white;
        }
        footer div:hover{
            color: #0cc440;
        }
    </style>
</head>
<body>
    <header>
        <div>热点</div>
        <div>关注</div>  
    </header>
    
    <section>
        <ul>
            <li>足球现场</li>
            <li>足球美女 </li>
            <li>足球生活</li>
        </ul>
       <div class="div1">
            <div>
                <img src="./image/樱桃小丸子.png">
                <p>小丸子啊小丸子！</p>
            </div>
            <div>
                <img src="./image/樱桃小丸子.png">
                <p>萌萌哒小丸子啊小丸子！萌萌哒小丸子啊小丸子！</p>
            </div>
            <div>      
                <img src="./image/樱桃小丸子.png">
                <p>小丸子啊小丸子！</p>
            </div>
            <div>
                <img src="./image/樱桃小丸子.png">
                <p>萌萌哒小丸子啊小丸子！萌萌哒小丸子啊小丸子！</p>
            </div>
            <div>
                <img src="./image/樱桃小丸子.png">
                <p>小丸子啊小丸子！</p>
            </div>
            <div>
                <img src="./image/樱桃小丸子.png">
                <p>萌萌哒小丸子啊小丸子！萌萌哒小丸子啊小丸子！</p>
            </div>
            <div>
                <img src="./image/樱桃小丸子.png">
                <p>萌萌哒小丸子啊小丸子！萌萌哒小丸子啊小丸子！
                    萌萌哒小丸子啊小丸子！萌萌哒小丸子啊小丸子！
                </p>
            </div>
       </div>
        
    </section>
    <footer>
        <div><i class="iconfont icon-03"></i>
        <span>首页</span></div>
        <div><i class="iconfont icon-fangdajing"></i>
        <span>发现</span></div>
        <div><i class="iconfont icon-tian"></i>
        </div>
        <div><i class="iconfont icon-user"></i>
        <span>我的</span></div>
        <div><i class="iconfont icon-tuichu"></i>
        <span>退出</span></div>
    </footer>
</body>
</html>